﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<HTML lang="cn">
<HEAD>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE>拾联flash播放器插件示例(带回放功能)</TITLE>

<script type="text/javascript" src="js/swfobject.js"></script>
	<script src="${pageContext.request.contextPath}/assets/js/demo.js"></script>
<script type="text/javascript">
	function onStartMet(){
		//这里还要添加flash	 
			var flashvars = {
				 playerID:'8'
				 ///*下面的五个参数，如果有传的话，页面是直接打开画面的，但是要传的对
				//*/
			};
			var params = {
				allowScriptAccess:'always'
				,allowFullscreen: "true"
				,scale: "exactFit"   //填充模式，以后大小由网页来调整
			};
			var attributes = { id:'player', name:'player' };
			var divObj = document.getElementById("main_video");
			var wVideo = document.getElementById("main_video").style.width;
			var hVideo = document.getElementById("main_video").style.height;
			
			
			swfobject.embedSWF('./SLPlayer.swf?ver='+Math.random(), 'main_video', wVideo,hVideo, '9.0.0','./expressInstall.swf', flashvars, params, attributes);
		} 
		var player;	
/**************************************************************下面是flash会调用js脚本的所有方法***********************************************************************/
		/**
		*flash播放器内部初始化完就会调用这个js接口
		*/				
		function onIniOk(){//初始化播放器结束，如果有本方法，播放会在初始化结束之后调用这里的js方法
			player = swfobject.getObjectById('player');
			player.setDebugVisible(true);
			player.SetServer("47.100.188.228",39100);
			player.ViewerLogin("wholeally", "czFYScb5pAu+Ze7rXhGh//x9gYTzRxlHykybiYXfmlUG5hUR8MkXH/MBaOy+I6hqSFLfYeF/Q/M89wJitc018nNXswgYb2jNZv8EsCI3VJc=");
			Print("播放器初始化结束开始连接平台。。。");
		} 

		/**
		*flash播放器在连接平台之后每次的服务变化都会调用这里,例如：第一次登录成功，会调用这里，以后断开、重连成功都会调用这里
		*/		
		function onServiceChange(jsonParam){//
			var  param = JSON.parse((jsonParam));
			Print("平台服务变化："+param.result);
		}     

		function onViewBackResult(jsonParam){//申请回放结果，如果中间连接断开是会调用其他js方法（比如回放转发断开）
			player = swfobject.getObjectById('player');
			var  param = JSON.parse((jsonParam));
			Print("申请回放返回结果："+param.result);
		}
		function onLoginFail(){
			Print("登录平台失败！");
		}
		function onViewFail(){
			Print("观看设备失败！");
		}
		function onViewClose(){
			Print("观看会话关闭！");
		}

		function onViewShow(){
			Print("画面即将出来，可以隐藏连接动画了！");
		}

		function onViewBackFail(){
			Print("回放录像失败！");
		}
		function onViewBackClose(){
			Print("回放会话关闭！");
		}
		function onViewBackResult(jsonParam){
			var  param = JSON.parse((jsonParam));
			Print("申请回放结果："+param.result);
		}
		function onViewBackResult(jsonParam){
			var  param = JSON.parse((jsonParam));
			Print("申请回放结果："+param.result);
		}
		function onQueryDayIndexResult(jsonParam){
			var  param = JSON.parse((jsonParam));
			Print("查询天索引结果："+param.result);
			Print("查询天索引内容："+param.dayInfo);
		}
		function onQuery24HIndexResult(jsonParam){
			var  param = JSON.parse((jsonParam));
			Print("查询24小时索引结果："+param.result);
			Print("查询24小时索引内容："+param.indx24HInfo);
		}
		function onPlayCtrlResult(jsonParam){
			var  param = JSON.parse((jsonParam));
			Print("播放控制结果："+param.result);
		}

/*************************************************************************************************************************************/

/**************************************下面是flash提供js脚本调用的所有方法示例（跟按钮上的方法是一对一的）**********************************************/
		/**
		*设定平台地址
		*/
		function SetServer(ip,port){
			player = swfobject.getObjectById('player');
			player.SetServer(ip, port);
		}
		/**
		*观看端登录平台
		*/
		function ViewerLogin(appID,userAuth){
			player = swfobject.getObjectById('player');
			player.ViewerLogin(appID, userAuth);			
		}
		/**
		*开始观看设备
		*/
		function StartView(chnID){
			player = swfobject.getObjectById('player');
			player.StartView(chnID);			
		}
		/**
		*停止观看设备
		*/
		function StopView(){
			player = swfobject.getObjectById('player');
			player.StopView();			
		}
		/**
		*云台操作
		* type  操作类型：
		* ctrlCmd  操作指令
		*/
		function CtrlPtz(type,ctrlCmd){
			player = swfobject.getObjectById('player');
			player.CtrlPtz(type,ctrlCmd);			
		}
		/**
		*设定播放器缓存时间（单位秒）
		*/
		function SetBufferTime(bufferTime){
			player = swfobject.getObjectById('player');
			player.SetBufferTime(bufferTime);			
		}

		/**
		 * 开始录像回放
		 * @param   chnID
		 * @param   cloud    是否从云存中取  0:从设备端读取,1:从云存读取	
		 */
		function StartViewBack(chnID,cloud){
			player = swfobject.getObjectById('player');
			player.StartViewBack(chnID,cloud);			
		}
	
		/**
		*停止录像回放
		*/
		function StopViewBack(){
			player = swfobject.getObjectById('player');
			player.StopViewBack();			
		}
		/**
		 * 查询指定子设备的天概要索引
		 * @param	chnID   子设备号
		 * @param	year    年
	 	 * @param	month   月
	 	 * @param	t_zone  时区
	 	 * @param	cloud   是否从云存中取  0:从设备端读取,1:从云存读取	
		 */
		function QueryDayIndex(chnID,year,month,t_zone,cloud){
			player = swfobject.getObjectById('player');
			player.QueryDayIndex(chnID,year,month,t_zone,cloud);			
		}
		/**
		 * 查询24小时索引文件信息
		 * @param	chnID  子设备id
		 * @param	year   年
	 	 * @param	month  月
		 * @param	day    日
	 	 * @param	hour   小时
	 	 * @param	minute  分钟
		 * @param	sec     秒
		 */
		function Query24HIndex(chnID,year,month,day,huor,minute,sec){
			player = swfobject.getObjectById('player');
			player.Query24HIndex(chnID,year,month,day,huor,minute,sec);			
		}

		/**
		 * 回放控制：
		 * @param	year    年
		 * @param	month   月
		 * @param	day     日 
		 * @param	hour    小时
		 * @param	min     分钟
		 * @param	sec     秒
		 * @param	playType 1播放;0停止;2暂停; 3继续
		 */
		function PlayBackCtrl(year, month, day, hour, min, sec, playType){
			player = swfobject.getObjectById('player');
			player.PlayBackCtrl(year, month, day, hour, min, sec, playType);			
		}


		/**
		*显示关闭调试面板
		*/
		function setDebugVisible(flag){
			player = swfobject.getObjectById('player');
			player.setDebugVisible(flag);			
		}

/*************************************************************************************************************************************/		
		</script>
<script language=javascript>
	function clickBtn(idex)
	{
		var curId = "btn"+idex;
		var obj = document.getElementById(curId);
		if(obj == undefined || obj == null){return;}
		
		// reset
		resetBtnState();
		
		if(idex == 0)
		{
			obj.style.background='url("imgs/start_btn_pressed.png")';
			if (open == true) {
				obj.style.background='url("imgs/start_btn_normal.png")';
			}
			
		}
		else if(idex == 1)
		{
			obj.style.background='url("imgs/up_pressed.png")';	
		}
		else if(idex == 2)
		{
			obj.style.background='url("imgs/left_pressed.png")';	
		}
		else if(idex == 3)
		{
			obj.style.background='url("imgs/right_pressed.png")';	
		}
		else if(idex == 4)
		{
			obj.style.background='url("imgs/down_pressed.png")';	
		}
	}
	function resetBtnState()
	{
		var btn0 = document.getElementById("btn0");
		var btn1 = document.getElementById("btn1");
		var btn2 = document.getElementById("btn2");
		var btn3 = document.getElementById("btn3");
		var btn4 = document.getElementById("btn4");

		btn0.style.background='url("imgs/start_btn_normal.png")';
		btn1.style.background='url("imgs/up_normal.png")';
		btn2.style.background='url("imgs/left_normal.png")';
		btn3.style.background='url("imgs/right_normal.png")';
		btn4.style.background='url("imgs/down_normal.png")';
	}

	var open;
	function startOrClose() {
		clickBtn(0);
		
		if (open == false || open == undefined) {
			play();
			changeShowToClose();
		} else {
			stop();
			changeShowToStart();
		}
	}
	function changeShowToClose()
	{
	 var obj = document.getElementById("btn0");
	 obj.innerHTML="开/关";
	}
	function changeShowToStart()
	{
	 var obj = document.getElementById("btn0");
	 obj.innerHTML="开/关";
	}
	
	function Print(str) {
				var stdout = document.getElementById('stdout');
				stdout.innerHTML += str + '<br>';
	}
</script>
</HEAD>
<BODY onload="onStartMet()">
	<div style="width: 100%; text-align: center;">
		<div
			style="margin-left: auto; margin-right: auto; width: 1110px; height: 546px; background-color: 0x000000; text-align: center;">
		<table style="margin:0px;padding:0px;border:none;">
		<tr>
<tr>
这个演示默认有 连接平台、登录平台了，  如果你要测试录像回放，请先按 申请回放 成功之后才可以  查24小时索引，和播放控制（播放回放），查天索引是可以随时查的，不需要申请回放
统一错误号注明：100为平台服务断开，  101是转发服务断开
</tr>
		<td>
			<div id="main_video" 
				style="margin-left: 0px;margin-top:0px; width: 640px; height: 360px; display: inline-block;">
				
			</div>
		</td>
		<td>
			<!-- 云台控制按钮 -->
			   <div class="cloudDivCss">
			<!-- 
				<a id="btn0" class="startCss" onClick="startOrClose()">开/关</a>
				<a id="btn1" class="upCloudCss" onmousedown="turnUp()" onmouseup="stopMove()"></a>
				<a id="btn2" class="leftCloudCss" onmousedown="turnLeft()" onmouseup="stopMove()"></a>
				<a id="btn3" class="rightCloudCss" onmousedown="turnRight()" onmouseup="stopMove()"></a>
			 
				<div class="cloudFontCss">云台</div>
				<a id="btn4" class="downCloudCss" onmousedown="turnDown()" onmouseup="stopMove()"></a>
				<div class="bgDivCss"><img class="bgImgCss" src="imgs/bg.png" /></div>
				<br/>
				-->
				<div style="text-align:center;width:100%;">
				<table><tr><td align = "center">
				<a class="BtnCss" onmousedown="SetServer('47.100.188.228', 39100)" >连接平台</a>
				<a class="BtnCss" onmousedown="ViewerLogin('wholeally', 'czFYScb5pAu+Ze7rXhGh//x9gYTzRxlHykybiYXfmlUG5hUR8MkXH/MBaOy+I6hqSFLfYeF/Q/M89wJitc018nNXswgYb2jNZv8EsCI3VJc=')" >登录平台</a>
				<a class="BtnCss" onmousedown="StartView('1000000056001')" >观看设备</a>
				<a class="BtnCss" onmousedown="StopView()" >停止观看</a>
				<a class="BtnCss" onmousedown="CtrlPtz(0,1)" >云台操作</a>
				<a class="BtnCss" onmousedown="SetBufferTime(1.3)" >设定缓存</a>
				</td><td  align = "center">
				<a class="BtnCss" onmousedown="setDebugVisible(true)" >显示调试</a>
				<a class="BtnCss" onmousedown="setDebugVisible(false)" >关闭调试</a>
				<a class="BtnCss" onmousedown="QueryDayIndex('1000000019002', 2017, 8, 22, 0)" >查天索引</a>
				<a class="BtnCss" onmousedown="StartViewBack('1000000019002', 0)" >申请回放</a>
				<a class="BtnCss" onmousedown="Query24HIndex('1000000019002', 2017, 8, 22, 11, 0, 0)" >小时索引</a>
				<a class="BtnCss" onmousedown="PlayBackCtrl(2017, 8, 22, 11, 0, 0, 1)" >播放录像</a>
				<a class="BtnCss" onmousedown="PlayBackCtrl(2017, 8, 22, 11, 0, 0, 2)" >暂停录像</a>
				<a class="BtnCss" onmousedown="PlayBackCtrl(2017, 8, 22, 11, 0, 0, 3)" >继续录像</a>
				<a class="BtnCss" onmousedown="StopViewBack()" >停止回放</a>
				</td></tr></table>
				</div>
			</div>
			
		</td>
		</tr>
		<tr>
		<td>
		<div id="stdout">
			</div>
		</td>
		</tr>

		</table>
		</div>

	</div>
	<script type="text/javascript">
		function turnUp() {
			clickBtn(1);
			
			ctrlPTZ(0,6);
		}
		function turnLeft() {
			clickBtn(2);
			
			ctrlPTZ(0,8);
		}
		function turnRight() {
			clickBtn(3);
			
			ctrlPTZ(0,9);
		}
		function turnDown() {
			clickBtn(4);
			
			ctrlPTZ(0,7);
		}
		function stopMove() {
			ctrlPTZ(0,14);
		}
	</script>
</BODY>
</HTML>
